﻿<template>
    <div
        class="comlist-item"
        v-for="(item, index) in list"
        :key="index"
        draggable="true"
        @dragstart="dragstartItem($event, item)"
        @dragend="dragendItem"
    >
        {{ item.comType }}
    </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
    {
        id: 1,
        comType: 'Text',
        val: 'text',
    },
    {
        id: 2,
        comType: 'Time',
        val: 'time',
    },
]);

// 组件开始拖拽
const dragstartItem = (e, item) => {
    // 计算鼠标在组件中的坐标
    const componentRect = e.target.getBoundingClientRect();

    let x = e.clientX - componentRect.left;
    let y = e.clientY - componentRect.top;

    e.dataTransfer.setData('key', JSON.stringify({ comType: item.comType, val: item.val, x, y }));
    // console.log(' item 开始');
};
// 组件结束拖拽
const dragendItem = e => {
    // console.log('item 结束');
};
</script>

<style scoped lang="scss">
.comlist-item {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: blue;
    color: #fff;
    text-align: center;
    cursor: move;
    margin-top: 20px;
}
</style>
